<template>
  <van-cell>
    <template v-slot:title
      ><van-image round width="40px" height="40px" :src="comments.aut_photo" />
      <span class="nickname">{{ comments.aut_name }}</span>
    </template>
    <template v-slot:default>
      <van-button
        type="default"
        class="buttomsty"
        size="mini"
        round
        :loading="loading"
        @click="setliekcount"
        :class="{ setcolor: comments.is_liking }"
      >
        <template v-slot:icon>
          <i class="iconfont icon-dianzan"></i>
        </template>
        {{ likecount || "赞" }}
      </van-button>
    </template>
    <template v-slot:label>
      <div class="cmmentbox">{{ comments.content }}</div>
      <div class="huifu">
        <span class="shijian">{{ comments.pubdate | relativeTime }}</span>
        <van-button type="default" size="mini" round>回复</van-button>
      </div>
    </template>
  </van-cell>
</template>

<script>
import { setlikecount, onlikecount } from "@/api/user.js";
export default {
  data() {
    return {
      loading: false, //点赞按钮加载状态
    };
  },
  props: {
    comments: {
      type: Object,
      require: true,
    },
    value: {
      type: Boolean,
      require: true,
    },
    likecount: {
      type: [Number, String, Object],
      require: true,
    },
  },
  methods: {
    async setliekcount() {
      if (!this.value) {
        // 点过评论赞
        try {
          let i = this.likecount + 1;
          this.loading = !this.loading;
          const { data } = await setlikecount(this.comments.com_id);
          this.$emit("input", !this.value);
          this.$emit("update:likecount", i);
          console.log(data);
        } catch (err) {
          this.$toast("点赞失败，稍后重试");
        }
      } else {
        // 没点过评论赞

        try {
          let i = this.likecount - 1;
          this.loading = !this.loading;
          const { data } = await onlikecount(this.comments.com_id);
          this.$emit("input", !this.value);
          this.$emit("update:likecount", i);
          console.log(data);
        } catch (err) {
          this.$toast("取消失败，稍后重试");
        }
      }

      this.loading = !this.loading;
    },
  },
};
</script>

<style lang="less" scoped>
.nickname {
  vertical-align: top;
  margin-left: 20px;
  font-size: 28px;
  color: gray;
}
.buttomsty {
  border: 0;
  position: absolute;
  right: 0;
}
.cmmentbox {
  padding: 0 0 0 100px;
  font-size: 40px;
}
.huifu {
  margin: 20px 0 0 0;
  .van-button {
    vertical-align: middle;
    margin: 0 0 0 10px;
    border: none;
  }
}
.setcolor {
  color: orange;
}
</style>
